<template>
  <view class="order-detail">
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <image src="/static/Images/goods/Fanhui.png" mode="aspectFit" class="back-icon"></image>
      </view>
      <view class="search-box">
        <image src="/static/Images/goods/Sousu.png" mode="aspectFit" class="search-icon"></image>
        <text class="search-placeholder">搜索喜欢的商品</text>
      </view>
      <view class="nav-right">
        <image src="/static/Images/goods/Share.png" mode="aspectFit" class="share-icon"></image>
      </view>
    </view>
    
    <!-- 商品信息区域 -->
    <view class="product-info">
      <view class="product-card">
        <view class="product-image-container">
          <image :src="productInfo.image" mode="aspectFill" class="product-image"></image>
        </view>
        <view class="product-details">
          <view class="product-title">{{ productInfo.title}}</view>
          <view class="product-price-container">
            <text class="price-symbol">¥</text>
            <text class="product-price">{{ productInfo.price || '18.92' }}</text>
            <text class="inventory">库存：{{ productInfo.inventory || '999998' }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 商品类型选择 -->
    <view class="product-type">
      <view class="section-title">商品类型</view>
      <view class="type-options">
        <view 
          v-for="(type, index) in productTypes" 
          :key="index"
          :class="['type-option', selectedType === index ? 'selected' : '']"
          @click="selectType(index)"
        >
          <text>{{ type }}</text>
        </view>
        <!-- 备用显示，防止v-for不渲染 -->
        <view v-if="!productTypes || productTypes.length === 0" class="type-option selected">
          <text>芒果手机端</text>
        </view>
      </view>
    </view>
    
    <!-- 商品时长选择 -->
    <view class="product-duration">
      <view class="section-title">商品时长</view>
      <view class="duration-options">
        <view 
          v-for="(duration, index) in durations" 
          :key="index"
          :class="['duration-option', selectedDuration === index ? 'selected' : '']"
          @click="selectDuration(index)"
        >
          <text>{{ duration }}</text>
        </view>
        <!-- 备用显示，防止v-for不渲染 -->
        <view v-if="!durations || durations.length === 0" class="duration-option selected">
          <text>7天</text>
        </view>
      </view>
    </view>
    
    <!-- 充值账号 -->
    <view class="recharge-account">
      <view class="recharge-account-container">
        <view class="recharge-account-left">
          <view class="section-title">充值账号</view>
        </view>
        <view class="recharge-account-middle">
          <view 
            class="account-type-btn" 
            :class="{ active: accountType === 'single' }" 
            @click="selectAccountType('single')"
          >
            <view class="radio-icon" :class="{ active: accountType === 'single' }"></view>
            <text class="account-type-text">单个账号</text>
          </view>
        </view>
        <view class="recharge-account-right">
          <view 
            class="account-type-btn" 
            :class="{ active: accountType === 'multiple' }" 
            @click="selectAccountType('multiple')"
          >
            <view class="radio-icon" :class="{ active: accountType === 'multiple' }"></view>
            <text class="account-type-text">多个账号</text>
          </view>
        </view>
      </view>
      <view class="account-input-container">
        <input 
          class="account-input" 
          type="text" 
          placeholder="请输入您需要充值的账号" 
          v-model="accountNumber"
        />
        <view class="add-account-btn" v-if="accountType === 'multiple'" @click="addAccount">
          <text class="add-icon">+</text>
        </view>
      </view>
    </view>
    
    <!-- 购买数量 -->
    <view class="purchase-quantity">
      <view class="purchase-quantity-left">
        <view class="section-title">购买数量</view>
      </view>
      <view class="purchase-quantity-middle"></view>
      <view class="purchase-quantity-right">
        <view class="quantity-control-container">
          <view class="quantity-lbtn" @click="decreaseQuantity">-</view>
          <text>|</text>
          <view class="quantity-value">{{ quantity }}</view>
          <text>|</text>
          <view class="quantity-rbtn" @click="increaseQuantity">+</view>
        </view>
      </view>
    </view>
    
    <!-- 成交记录 -->
    <view class="transaction-records">
      <view class="transaction-title">成交记录</view>
      
      <view class="transaction-table">
        <!-- 表头 -->
        <view class="table-header">
          <view class="header-cell">成交时间</view>
          <view class="header-cell">价格</view>
          <view class="header-cell">耗时</view>
        </view>
        
        <!-- 表格内容 -->
        <view class="table-row" v-for="(record, index) in transactionRecords" :key="index">
          <view class="table-cell time-cell">{{ record.time }}</view>
          <view class="table-cell price-cell">¥{{ record.price }}</view>
          <view class="table-cell duration-cell">{{ record.duration }}</view>
        </view>
      </view>
    </view>
        
    <!-- 销售渠道 -->
    <view class="sales-channels">
      <view class="sales-title">销售渠道</view>
      
      <view class="channels-container">
        <view class="channel-row">
          <view v-for="(channel, index) in salesChannels.slice(0, 5)" :key="index" class="channel-item">
            <view class="channel-icon-container" :class="{'active': channel.active}">
              <image :src="channel.icon" mode="aspectFit" class="channel-icon"></image>
            </view>
            <text class="channel-name">{{ channel.name }}</text>
          </view>
        </view>
        
        <view class="channel-row">
          <view v-for="(channel, index) in salesChannels.slice(5, 10)" :key="index" class="channel-item">
            <view class="channel-icon-container" :class="{'active': channel.active}">
              <image :src="channel.icon" mode="aspectFit" class="channel-icon"></image>
            </view>
            <text class="channel-name">{{ channel.name }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="service-guarantees">
      <view class="guarantee-item" v-for="(guarantee, index) in guarantees" :key="index">
        <image :src="guarantee.icon" mode="aspectFit" class="guarantee-icon"></image>
        <text class="guarantee-text">{{ guarantee.text }}</text>
      </view>
    </view>
    
    <!-- 商品详情 -->
    <view class="product-description">
      <view class="description-header">
        <text class="description-title">当季采摘 首发</text>
      </view>
      <view class="description-content">
        <text class="description-subtitle">红星苹果新鲜水果</text>
        <view class="description-details">
          <text>精选优质，自然生长</text>
          <text>多汁甜脆，营养丰富</text>
        </view>
        <view class="product-images">
          <image src="/static/Images/goods/apple.png" mode="widthFix" class="description-image"></image>
        </view>
        <view class="taste-section">
          <text class="taste-title">味道</text>
          <text class="taste-subtitle">甜脆的口感中</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="bottom-icons">
        <view class="bottom-icon-item">
          <image src="/static/Images/goods/Home.png" mode="aspectFit" class="bottom-icon"></image>
          <text class="icon-text">首页</text>
        </view>
        <view class="bottom-icon-item">
          <image src="/static/Images/goods/Dingdan.png" mode="aspectFit" class="bottom-icon"></image>
          <text class="icon-text">订单</text>
        </view>
        <view class="bottom-icon-item">
          <image src="/static/Images/goods/Kefu.png" mode="aspectFit" class="bottom-icon"></image>
          <text class="icon-text">客服</text>
        </view>
      </view>
      <view class="action-buttons">
        <view class="buy-now-btn">立即购买</view>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,
      productInfo: {
        title: '【账号充值】芒果TV会员7天',
        price: '18.92',
        inventory: '999998',
        image: '/static/Images/goods/Goods.png'
      },
      productTypes: ['芒果手机端', '芒果电视端'],
      selectedType: 0,
      durations: ['7天', '1个月', '3个月', '7个月'],
      selectedDuration: 0,
      showDeliveryAddress: false,      accountType: 'multiple', // 单个账号或多个账号
      accountNumber: '', // 充值账号
      quantity: 1, // 购买数量
      address: {
        name: '张三',
        phone: '138****1234',
        fullAddress: '广东省广州市天河区天河路123号'
      },
      paymentRecords: [
        { time: '2023-05-20', amount: '¥100', status: '已付款' },
        { time: '2023-05-19', amount: '¥200', status: '已付款' },
        { time: '2023-05-18', amount: '¥150', status: '已付款' },
        { time: '2023-05-17', amount: '¥300', status: '已付款' },
        { time: '2023-05-16', amount: '¥250', status: '已付款' }
      ],
      transactionRecords: [
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' },
        { time: '2025-05-29', price: '950', duration: '1小时30分' }
      ],
      infoTags: [
        { icon: '/static/Images/goods/tag1.png', text: '正品保障' },
        { icon: '/static/Images/goods/tag2.png', text: '极速发货' },
        { icon: '/static/Images/goods/tag3.png', text: '售后无忧' },
        { icon: '/static/Images/goods/tag4.png', text: '特色服务' },
        { icon: '/static/Images/goods/tag1.png', text: '七天包退' },
        { icon: '/static/Images/goods/tag2.png', text: '运费险' },
        { icon: '/static/Images/goods/tag3.png', text: '假一赔十' },
        { icon: '/static/Images/goods/tag4.png', text: '全场包邮' }
      ],
      salesChannels: [
        { icon: '/static/Images/goods/Chenggong.png', name: '咸鱼', active: true },
        { icon: '/static/Images/goods/Chenggong.png', name: '得物', active: true },
        { icon: '/static/Images/goods/Chenggong.png', name: '小红书', active: true },
        { icon: '/static/Images/goods/Chenggong.png', name: '拼多多', active: true },
        { icon: '/static/Images/goods/shibai.png', name: '淘宝', active: false },
        { icon: '/static/Images/goods/shibai.png', name: '京东', active: false },
        { icon: '/static/Images/goods/shibai.png', name: '抖音', active: false },
        { icon: '/static/Images/goods/shibai.png', name: '限购', active: false },
        { icon: '/static/Images/goods/shibai.png', name: '不支持API', active: false }
      ],
      guarantees: [
        { icon: '/static/Images/goods/Zhengpin.png', text: '正品保障' },
        { icon: '/static/Images/goods/Anquan.png', text: '安全保障' },
        { icon: '/static/Images/goods/Jisu.png', text: '极速到账' },
        { icon: '/static/Images/goods/Shouhou.png', text: '售后服务' }
      ]
    };
  },
  created() {
    // #ifdef MP-WEIXIN
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    // 获取胶囊按钮信息
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    // 计算状态栏高度：系统状态栏高度 + 胶囊按钮高度 + 额外间距
    this.statusBarHeight = (systemInfo.statusBarHeight || 0) + (menuButtonInfo.height || 32) + 8
    // #endif
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectType(index) {
      this.selectedType = index;
    },
    selectDuration(index) {
      this.selectedDuration = index;
    },
    // 选择账号类型
    selectAccountType(type) {
      this.accountType = type;
    },
    // 添加账号
    addAccount() {
      // 这里可以实现添加多个账号的逻辑
      uni.showToast({
        title: '添加账号功能待实现',
        icon: 'none'
      });
    },
    // 增加购买数量
    increaseQuantity() {
      this.quantity++;
    },
    // 减少购买数量
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 状态栏样式
.status-bar {
  width: 100%;
  background: linear-gradient(180deg, #FF7B80 0%, rgba(244,234,234,0) 100%);
}

.order-detail {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx; // 为底部操作栏留出空间
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .nav-left, .nav-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .back-icon, .share-icon {
    width: 40rpx;
    height: 40rpx;
  }
  
  .search-box {
    flex: 1;
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    margin: 0 20rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    
    .search-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
    
    .search-placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }
}

// 商品信息区域
.product-info {
  padding: 20rpx;
  
  .product-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    border: 1px dashed #ddd;
    
    .product-image-container {
      width: 180rpx;
      height: 180rpx;
      margin-right: 30rpx;
      
      .product-image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
    
    .product-details {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .product-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: #000;
      }
      
      .product-price-container {
        display: flex;
        align-items: baseline;
        
        .price-symbol {
          color: #ff4d4f;
          font-size: 28rpx;
          margin-right: 4rpx;
        }
        
        .product-price {
          color: #ff4d4f;
          font-size: 40rpx;
          font-weight: bold;
          margin-right: 20rpx;
        }
        
        .inventory {
          color: #999;
          font-size: 24rpx;
        }
      }
    }
  }
}

// 商品类型和时长选择共用样式
.product-type, .product-duration, .recharge-account, .purchase-quantity {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1px dashed #ddd;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }
  
  .type-options, .duration-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    
    .type-option, .duration-option {
      padding: 15rpx 40rpx;
      border-radius: 40rpx;
      border: 1px solid #ddd;
      font-size: 28rpx;
      color: #666;
      background-color: #f9f9f9;
      
      &.selected {
        background-color: #fff0f0;
        color: #ff4d4f;
        border-color: #ff4d4f;
      }
    }
  }
}

// 充值账号样式
.recharge-account {
  .recharge-account-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
    .recharge-account-left {
      flex: 1;
    }
    
    .recharge-account-middle {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    
    .recharge-account-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  .account-type-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx;
    margin-bottom: 1rem;
    
    .radio-icon {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      border: 1px solid #ddd;
      position: relative;
      
      &.active {
        border-color: #ff4d4f;
        background-image: url('/static/Images/goods/Xuanzhong.png');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        }
      }
      
      .account-type-text {
        font-size: 28rpx;
        color: #333;
        margin-left: 10rpx;
      }
      
      &.active {
        .account-type-text {
          color: #ff4d4f;
        }
      }
    }
  }
  
  .account-input-container {
    display: flex;
    border: 1px dashed #ddd;
    border-radius: 10rpx;
    padding: 20rpx;
    
    .account-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .add-account-btn {
      width: 50rpx;
      height: 50rpx;
      background-color: #f5f5f5;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .add-icon {
        font-size: 32rpx;
        color: #666;
      }
    }
  }

// 购买数量样式
.purchase-quantity {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  
  .purchase-quantity-left {
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
  }
  
  .purchase-quantity-middle {
    flex: 1;
  }
  
  .purchase-quantity-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  
  .quantity-control-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px dashed #ddd;
    border-radius: 1.3rem;
    padding: 10rpx 20rpx;
    width: 240rpx;
    
    
    .quantity-lbtn {
      width: 80rpx;
      height: 40rpx;
      border-right: 1px solid #333;

      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      color: #333;
      background-color: #fff;
    }
    .quantity-rbtn {
      width: 80rpx;
      height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      color: #333;
      background-color: #fff;
      border-left: 1px solid #333;
    }
    
    .quantity-value {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin: 0 20rpx;
    }
  }
}

// 成交记录样式
.transaction-records {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  
  .transaction-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .transaction-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    overflow: hidden;
    margin-top: 10rpx;
    
    .table-header {
      display: flex;
      padding: 20rpx 0;
      
      .header-cell {
        flex: 1;
        text-align: center;
        color: #999;
        font-size: 28rpx;
      }
    }
    
    .table-row {
      display: flex;
      padding: 20rpx 0;
      background-color: #fff;
      
      &:nth-child(odd) {
        background-color: #f9f9f9;
      }
      
      .table-cell {
        flex: 1;
        text-align: center;
        color: #333;
        font-size: 28rpx;
      }
      
      .time-cell {
        color: #666;
      }
      
      .price-cell {
        color: #666;
      }
      
      .duration-cell {
        color: #666;
      }
    }
}

// 收货地址
.delivery-address {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1px dashed #ddd;
  
  .address-content {
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
  }
}

// 订单记录
.order-records {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1px dashed #ddd;
  
  .records-table {
    width: 100%;
    font-size: 24rpx;
    
    .table-header {
      display: flex;
      background-color: #f5f5f5;
      padding: 15rpx 0;
    }
      .header-cell {
        flex: 1;
        text-align: center;
        color: #666;
      }
    }
    
    .table-row {
      display: flex;
      padding: 15rpx 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .row-cell {
        flex: 1;
        text-align: center;
        color: #333;
      }
    }
  }
}

// 信息标签
.info-tags {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1px dashed #ddd;
  
  .tag-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .info-tag {
    display: flex;
    align-items: center;
    
    .tag-icon {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
    }
    
    .tag-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

// 销售渠道样式
.sales-channels {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  
  .sales-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .channels-container {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 10rpx;
  }
  
  .channel-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .channel-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 20%;
    margin-bottom: 15rpx;
  }
  
  .channel-icon-container {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.active {
      border-color: #4CAF50;
      background-color: rgba(76, 175, 80, 0.1);
    }
  }
  
  .channel-icon {
    width: 40rpx;
    height: 40rpx;
  }
  
  .channel-name {
    font-size: 24rpx;
    color: #666;
    margin-left: 10rpx;
  }
}

// 服务保障样式
.service-guarantees {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  border: 1rpx dashed #eee;
  
  .guarantee-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 25%;
  }
  
  .guarantee-icon {
    width: 40rpx;
    height: 40rpx;
  }
  
  .guarantee-text {
    font-size: 24rpx;
    color: #333;
    font-weight: 500;
  }
}

// 商品详情
.product-description {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .description-header {
    text-align: center;
    margin-bottom: 20rpx;
    
    .description-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff4d4f;
    }
  }
  
  .description-content {
    .description-subtitle {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      text-align: center;
    }
    
    .description-details {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
    
    .product-images {
      margin-bottom: 30rpx;
      
      .description-image {
        width: 100%;
        border-radius: 10rpx;
      }
    }
    
    .taste-section {
      text-align: center;
      
      .taste-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .taste-subtitle {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  padding: 20rpx;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .bottom-icons {
    display: flex;
    align-items: center;
    
    .bottom-icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 30rpx;
      
      .bottom-icon {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 5rpx;
      }
      
      .icon-text {
        font-size: 22rpx;
        color: #666;
      }
    }
  }
  
  .action-buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
    .add-to-cart-btn, .buy-now-btn {
      padding: 15rpx 30rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      text-align: center;
      width: 60%;
    }
    
    .add-to-cart-btn {
      background-color: #fff0f0;
      color: #ff4d4f;
      margin-right: 20rpx;
    }
    
    .buy-now-btn {
      background-color: #ff4d4f;
      color: #fff;
    }
  }
}
</style>

